<template>
  <div class="screen-left">
    <div class="screen-item-title bgImage">企业简介</div>
    <div class="desc">
      <div class="houseImg"></div>
      江苏鸿升生物科技有限公司成立于2012年，是一家国内知名的食用菌生产企业，占地约888亩，注册资本1110万元，总资产14092.83万元，是江苏省农业产业化省级重点龙头企业。
      是苏北地区最大的鹿茸菇生产基地之一。下设鸿福、鸿运、鸿盛三个全资子公司。
    </div>

    <div class="screen-item-title bgImage industry">产业状况</div>
    <div class="d-flex flex-wrap industry-wrap justify-content-between">
      <div v-for="item in list" :key="item.className" class="industry-item">
        <div :class="item.className"></div>
        <div class="circle-dot"></div>
        <span class="name">{{ item.name }}</span>
        <span class="industry-value text-white">{{ item.value }}</span>
      </div>
    </div>
    <div class="screen-item-title bgImage production">年产量产值分析</div>
    <div id="production-charts" class="production-charts"></div>
    <div class="screen-item-title bgImage" honour>公司荣誉</div>
    <div class="mySwiper">
      <div class="swiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <div class="img111"></div>
          </div>
          <div class="swiper-slide">
            <div class="img112"></div>
          </div>
          <div class="swiper-slide">
            <div class="img113"></div>
          </div>
          <div class="swiper-slide">
            <div class="img114"></div>
          </div>
        </div>
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-pagination"></div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import yieldProduct from './../api/prodAnalysis';
import * as echarts from 'echarts';
import productData from './product-ana';
const list = ref([
  { className: 'areaIcon', name: '总面积', value: '6500 ㎡' },
  { className: 'houseIcon', name: '厂房', value: '48 个' },
  { className: 'growIcon', name: '育菇房', value: '367 个' },
  { className: 'technologyIcon', name: '技术人员', value: '25 人' },
]);
let analysisYear: any = ref([]);
let productiv: any = ref([]);
let yieldList: any = ref([]);
const getProductionList = async () => {
  let data = await yieldProduct.yieldProductAnalysisList({ current: 1, size: 12 });
  data.data.data.records.forEach((item) => {
    analysisYear.value.push(item.analysisYear);
    productiv.value.push(item.productiv);
    yieldList.value.push(item.yield);
  });
  productData.xAxis[0].data = analysisYear.value;
  productData.series[0].data = yieldList.value;
  productData.series[1].data = productiv.value;
  const productionCharts = document.getElementById('production-charts');
  if (productionCharts) {
    const myChart = echarts.init(productionCharts);
    myChart.setOption(productData);
  }
};
onMounted(() => {
  setTimeout(() => {
    var swiper = new Swiper('.swiper', {
      spaceBetween: 30,
      centeredSlides: true,
      autoplay: {
        delay: 2500,
        disableOnInteraction: false,
      },
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    });
  }, 40);
});
getProductionList();
</script>
<style lang="scss">
.screen-left {
  width: 379px;
}

.desc {
  width: 378px;
  font-size: 16px;
  font-family: MicrosoftYaHei;
  font-weight: 400;
  color: #ffffff;
  margin: 17px 0 21px 0;
}
.houseImg {
  width: 169px;
  height: 108px;
  margin: 14px;
  background: url(./../assets/house.jpg) no-repeat;
  background-size: 100% 100%;
  float: right;
}
.industry {
  padding-bottom: 22px;
}
.circle-dot {
  width: 7px;
  height: 7px;
  background: #12ffe6;
  position: absolute;
  left: 9px;
  top: 15px;
  border-radius: 50%;
}
.industry-item {
  width: 161px;
  height: 61px;
  background: url(./../assets/industry-item.png) no-repeat;
  background-size: 100% 100%;
  margin-top: 19px;
  position: relative;
}
.industry-wrap {
  width: 377px;
}
.name {
  font-size: 12px;
  color: #89d8e8;
  position: absolute;
  left: 22px;
  top: 9px;
}
.areaIcon,
.houseIcon,
.growIcon,
.technologyIcon {
  position: absolute;
  left: 116px;
  top: 25px;
}
.areaIcon {
  position: absolute;
  left: 116px;
  top: 25px;
  width: 33px;
  height: 33px;
  background: url(./../assets/1.png) no-repeat;
  background-size: 100% 100%;
}
.technologyIcon {
  width: 30px;
  height: 32px;
  background: url(./../assets/4.png) no-repeat;
  background-size: 100% 100%;
}
.houseIcon {
  width: 33px;
  height: 31px;
  background: url(./../assets/2.png) no-repeat;
  background-size: 100% 100%;
}
.growIcon {
  width: 35px;
  height: 31px;
  background: url(./../assets/3.png) no-repeat;
  background-size: 100% 100%;
}
.img111 {
  width: 300px;
  height: 200px;
  background: url(./../assets/111.jpg) no-repeat;
  background-size: contain;
  background-position: center;
}
.img112 {
  width: 300px;
  height: 200px;
  background: url(./../assets/112.jpg) no-repeat;
  background-size: contain;
  background-position: center;
}
.img113 {
  width: 300px;
  height: 200px;
  background: url(./../assets/113.jpg) no-repeat;
  background-size: contain;
  background-position: center;
}
.img114 {
  width: 300px;
  height: 200px;
  background: url(./../assets/114.jpg) no-repeat;
  background-size: contain;
  background-position: center;
}
.production {
  margin-top: 22px;
}
.production-charts {
  height: 185px;
}

.honour {
  margin-bottom: 18px;
}
.industry-value {
  font-size: 20px;
  position: absolute;
  left: 23px;
  top: 28px;
}
.swiper {
  width: 100%;
  height: 160px;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;

  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

.swiper-slide img {
  display: block;
  width: 100%;
}
.mySwiper {
  padding-top: 20px;
}
</style>
